import React from 'react';
import SelectType from 'views/component/selectType';
import { ShopApi } from 'js/api/shop';
import XDate from 'xdate';
import echarts from 'js/lib/echarts';
import $ from 'jquery';
import './flowAveNumber.scss';
import { DatePicker, Icon } from 'antd-mobile';
import moment from 'moment';

const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const monthType = ['上旬', '中旬', '下旬'];
const timeData = [{ id: 'hour', name: '时' }, { id: 'day', name: '日' }, { id: 'month', name: '月' }];
let chartFontSize = parseInt(window.fontSize / 4);

const FlowAveNumber = React.createClass({
    getInitialState() {
        return { year: new Date().getFullYear(), TimeType: 'hour', CurrDate: new XDate().toString('yyyy-MM-dd'), loading: true }
    },
    componentDidMount() {
        this.getflowAveNumberData()
    },
    getflowAveNumberData() {
        let query = {
            ShopId: this.props.shopId,
            CurrDate: this.state.CurrDate,
            TimeType: this.state.TimeType,
            flowDataType: this.props.flowDataType,
            Year: this.state.year,
            AreaTypeId: this.props.AreaTypeId,
            AreaId: this.props.AreaId,
            IndustryId: this.props.AreaId
        };
        this.setState({ loading: true })
        ShopApi.getflowAveNumberData(query, (data) => {
            this.setState({ loading: false })
            this.setChart(data);
        });
    },
    setChart(data) {
        var xAxisData = [],
            seriesData1 = [],
            seriesData2 = [],
            timeType = this.state.TimeType,
            total = 0;

        if (timeType === 'month') {
            for (var i in data) {
                data[i].CTIME = monthType[parseInt(data[i].CTIME) - 1];
            }
        } else if (timeType === 'day') {
            for (let i in days) {
                for (let j in data) {
                    if (data[j].CTIME === days[i]) {
                        var temp = data[i];
                        data[i] = data[j];
                        data[j] = temp;
                        break;
                    }
                }
            }
        }
        var contrastData = [];
        var contrast = 0;
        for (let i in data) {
            if (parseInt(data[i].CTOTAL) > 0) {
                contrastData.push(parseInt(data[i].CTOTAL));
            }
        }
        contrastData.sort(function (a1, a2) {
            return a1 > a2 ? 1 : -1;
        });
        if (contrastData.length > 3) {
            contrast = contrastData[contrastData.length - 3];
        } else if (contrastData.length > 0) {
            contrast = contrastData[contrastData.length - 1];
        }
        for (let i in data) {
            if (timeType === 'month') {
                xAxisData.push(data[i].CTIME);
            } else if (timeType === 'hour') {
                xAxisData.push(data[i].CTIME + ':00');
            } else {
                xAxisData.push(data[i].CTIME);
            }
            if (parseInt(data[i].CTOTAL) === 0) {
                seriesData1.push('-');
            } else {
                if (parseInt(data[i].CTOTAL) >= contrast) {
                    seriesData1.push({
                        value: data[i].CTOTAL,
                        itemStyle: {
                            normal: {
                                color: '#ffc186'
                            }
                        }
                    });
                } else {
                    seriesData1.push(data[i].CTOTAL);
                }
                total += parseInt(data[i].CTOTAL);
            }
        }
        var max = 0;
        for (let i in data) {
            if (parseInt(data[i].CTOTAL) === 0) {
                seriesData2.push('-');
                continue
            }
            var per = (parseInt(data[i].CTOTAL) / total * 100).toFixed(1);
            if (per > max) {
                max = parseInt(per) + 1;
            }
            seriesData2.push(per);
        }

        var option = {
            animation: false,
            textStyle: {
                fontSize: chartFontSize
            },
            grid: {
                width: '90%',
                left: '5%',
                height: '70%',
                top: '8%',
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    margin: 20,
                    textStyle: {
                        color: '#ccc',
                        fontSize: chartFontSize
                    }
                },
                data: xAxisData
            }, {
                type: 'category',
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisLabel: false,
                data: xAxisData
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
                axisLabel: false
            }, {
                max: max * 2,
                min: 0,
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: false
            }],
            dataZoom: {
                type: 'inside',
                xAxisIndex: [
                    0, 1
                ],
                startValue: 0,
                endValue: 4,
                orient: 'horizontal'
            },
            series: [{
                type: 'bar',
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: '#5B6BC2'
                    }
                },
                barWidth: 25,
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                data: seriesData1
            }, {
                yAxisIndex: 1,
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#4BA8E4'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        formatter: '{c}%',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                data: seriesData2
            }]
        };
        if (this.refs.chart) {
            this.chart = echarts.init(this.refs.chart);
            this.chart.setOption(option);
        }

    },
    selectTypeOnChange(value) {
        this.state.TimeType = value;
        this.setState({ TimeType: value })
        this.getflowAveNumberData();
    },
    yearOnChange(date) {
        this.setState({ year: moment(date).year() })
        this.getflowAveNumberData()
    },
    render() {
        return (
            <div id="flowAveNumber" className="flowContent">
                <div className="flowHead">
                    <div className="title">旺场时段分析</div>
                </div>
                <div>
                    <SelectType data={timeData} value={this.state.TimeType} onChange={this.selectTypeOnChange} />
                </div>
                <div className="flex jc-end btn-line">
                    <DatePicker mode="year" maxDate={moment()} minDate={moment().subtract(11, 'years')} onChange={this.yearOnChange} className="right">
                        <div className="btn-select">年份:{this.state.year}<i className="icon-triangle"></i></div>
                    </DatePicker>
                </div>
                <div className="bottomTitle">客流走势分析图</div>
                {
                    this.state.loading ? <div className="chart flex-center" key={1}>
                        <Icon type="loading" size={'md'} />
                    </div> : <div className="chart flex-center" ref='chart' key={2}></div>
                }
                <div className="flex-center bottomCon">
                    <div className="flex-g-1 flex-center"><span className="icon icon-flowAveNumberData-1"></span>平均客流人数</div>
                    <div className="flex-g-1 flex-center"><span className="icon icon-flowAveNumberData-2"></span>客流人数占比</div>
                    <div className="flex-g-1 flex-center"><span className="icon icon-flowAveNumberData-3"></span>热点时段</div>
                </div>
            </div>
        );
    }
})

module.exports = FlowAveNumber;